<template>
    <div class="wrapper ">
        <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="canvas-box">
            <canvas class="offCanvas"></canvas>
            <canvas class="canvas"></canvas>
        </div>
        
        <!-- 工具条-->
        <div class="toolbar">
            <div class="toolbar-item" @click="onShowColor"><img src="../../assets//colors.png"><span>颜色</span></div>
            <div class="toolbar-item" @click="onShowPen"><img src="../../assets/size.png"/><span>画笔</span></div>
            <div class="toolbar-item" @click="onShowRubber"><img src="../../assets/rubber.png"><span>橡皮擦</span></div>
            <div class="toolbar-item" @click="clearCanvas"><img src="../../assets//clear.png"><span>清屏</span></div>
            <div class="toolbar-item" @click="saveImage"><img src="../../assets//save.png"><span>保存</span></div>
        </div>
        <div class="footer">
            <div class="user-list">
                <div v-for="i in 6" :key="i" class="user-item">
                    <img src="../../assets/avatar.jpg" />
                    <div class="nick-name">凡繁烦</div>
                    <span class="draw-tip" v-if=" i == drawerId">绘图中</span>
                    <span class="level">{{i}}</span>
                </div>
            </div>
            <div class="chat-content">
                <div v-for="i in 10" :key="i" class="chat-item">
                    <img src="../../assets/avatar.jpg"><span>凡繁烦:</span><span>ww</span>
                </div>
            </div>
            <div class="input-content"></div>
        </div>
        <van-popup v-model="showColor" position="bottom" :overlay="false" :closeable="true" @click-overlay="onHideColor">
            <div class="color-list">
                <div class="color-item" v-for="(item,i) in colorData" :key="i" :style="{backgroundColor:item}" @click="choiceColor(item)"></div>
            </div>
        </van-popup>
        <van-popup v-model="showPen" position="bottom" :overlay="false" :closeable="true" @click-overlay="onHideColor">
            <div class="pen-list">
                <div class="pen-item" v-for="(item,i) in lineWidthData" :key="i" :style="{height: item.height +'px',backgroundColor:strokeColor}" @click="choicePen(item)"></div>
            </div>
        </van-popup>
        <van-popup v-model="showRubber" position="bottom" :overlay="false" :closeable="true" @click-overlay="onHideColor" :style="{ height: '80px' }" >
            <div class="rubber-area">
                <van-slider v-model="rubberSize" @change="onChange" :active-color="strokeColor" :max="50" :min="10" :style="{marginTop: 40}" />
            </div>
        </van-popup>
    </div>
</template>
<script>
export default {
    data(){
        return{
            title: `房间[${this.$route.params.id}]`,
            offCanvas: null,
            canvas: null,
            offCtx: null,
            ctx: null,
            lastCoordinate: null,
            lastTimestamp: 0,
            lastLineWidth: -1,
            point: null,
            sizeWidth: 30,
            strokeColor: '#000',
            imgSrc: null,
            imgArray: [],
            rubberSize: 25,
            flag: true,
            showColor: false,
            showPen: false,
            showRubber: false,
            drawerId: 3,
            colorData: ["#ff0000","#00ffff","#00ff00","#000000","#ff6302",'#8552a1','#ffe600','#53261f','#00a6ac','#4d4f36','#ef5b9c','#918597'],
            lineWidthData: [{value:10, name:'大笔',height: 25},{value:30, name:'中笔',height: 20},{value:50, name:'小笔',height: 15}]
        }
    },
    mounted(){
        this.offCanvas = document.querySelector('.offCanvas')
        this.canvas = document.querySelector('.canvas')
        this.offCtx = this.offCanvas.getContext('2d')
        this.ctx = this.canvas.getContext('2d')
        this.offCanvas.width = document.body.clientWidth;
        this.offCanvas.height = document.body.clientWidth;
        this.canvas.width = document.body.clientWidth;
        this.canvas.height = document.body.clientWidth;
        document.querySelector('.canvas-box').style.height=document.body.clientWidth+'px'
        document.querySelector('.footer').style.height = document.body.clientHeight-(document.body.clientWidth+46+60)+'px'
        this.canvas.addEventListener('touchstart',(e) => {
            let evt = e || event
            this.point = {
                x: evt.touches[0].clientX,
                y: evt.touches[0].clientY
            }
            this.lastCoordinate =  this.windowToCanvas(this.point.x, this.point.y);
            this.lastTimestamp = new Date().getTime();
        })

        this.canvas.addEventListener('touchmove',(e) => {
            let evt = e || event
            this.point = {
                x: evt.touches[0].clientX,
                y: evt.touches[0].clientY
            }
            this.curCoordinate = this.windowToCanvas(this.point.x, this.point.y);
            if(this.flag){
                var curTimestamp = new Date().getTime();
                var s = this.calcDistance(this.lastCoordinate, this.curCoordinate);
                var t = curTimestamp - this.lastTimestamp;
                var curLineWidth = this.caleLineWidth(s, t, this.sizeWidth);
                this.drawLine(this.ctx, this.lastCoordinate.x, this.lastCoordinate.y, this.curCoordinate.x, this.curCoordinate.y,
                curLineWidth, this.strokeColor);
                this.lastCoordinate = this.curCoordinate;
                this.lastTimestamp = curTimestamp;
                this.lastLineWidth = curLineWidth;
            }else{
                this.ctx.save();
                this.ctx.beginPath();
                this.ctx.arc(this.curCoordinate.x, this.curCoordinate.y, this.rubberSize / 2, 0, Math.PI * 2);
                this.ctx.clip();
                this.ctx.clearRect(this.curCoordinate.x - this.rubberSize / 2, this.curCoordinate.y - this.rubberSize / 2,
                    this.rubberSize, this.rubberSize);
                this.ctx.restore();
            }
        })

        this.canvas.addEventListener('touchend',() => {
            var imageSrc = this.canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
            console.log(imageSrc);
        })

        
    },
    methods:{
        onClickLeft:function(){
            this.$router.back(-1);
        },
        windowToCanvas:function(x,y){
            let bbox = this.canvas.getBoundingClientRect();
            return {
                x: x - bbox.left,
                y: y - bbox.top
            }
        },
        caleLineWidth: function(s, t, brushWidth){
            var v = s / t;
            var maxVelocity = 10,
            minVelocity = 0.1,
            maxLineWidth = Math.min(30, this.canvas.width / brushWidth),
            minLineWidth = 1,
            resultLineWidth;
            if (v <= minVelocity) {
                resultLineWidth = maxLineWidth;
            } else if (v >= maxVelocity) {
                resultLineWidth = minLineWidth;
            } else {
                resultLineWidth = maxLineWidth - (v - minVelocity) / (maxVelocity - minVelocity) * (maxLineWidth -
                    minLineWidth);
            }
            if (this.lastLineWidth == -1) {
                return resultLineWidth;
            } else {
                return resultLineWidth * 2 / 3 + this.lastLineWidth * 1 / 3;
            }
        },
        drawLine: function(context, x1, y1, x2, y2, lineWidth, strokeColor){
            context.beginPath();
            context.lineTo(x1, y1);
            context.lineTo(x2, y2);
            context.lineWidth = lineWidth;
            context.lineCap = 'round';
            context.lineJoin = 'round';
            context.strokeStyle = strokeColor;
            context.stroke();
        },
        calcDistance: function(lastCoordinate, curCoordinate){
            var distance = Math.sqrt(Math.pow(curCoordinate.x - lastCoordinate.x, 2) + Math.pow(curCoordinate.y -
            lastCoordinate.y, 2));
            return distance;
        },
        clearCanvas: function(){
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.offCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        },
        saveImage: function(){
            let img = this.canvas.toDataURL("image/png", 1).replace('image/png',
                'image/octet-stream');
            let filename = 'canvas_' + (new Date()).getTime() + '.png';
            var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            saveLink.href = img;
            saveLink.download = filename;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            saveLink.dispatchEvent(event);
        },
        onShowColor: function(){
            this.showColor = true;
            this.flag = true;
        },
        onHideColor: function(){
            this.showColor = false;
        },
        choiceColor: function(color){
            this.showColor = false;
            this.strokeColor = color
        },
        onShowPen: function(){
            this.showPen = true;
        },
        choicePen: function(obj){
            this.showPen = false;
            this.sizeWidth = obj.value;
            this.flag = true;
        },
        onShowRubber: function(){
            this.showRubber = true;
            this.flag = false;
        },
        onChange:function(value){
            this.rubberSize = value
        }
    }
}
</script>
<style lang="scss" scoped>

.wrapper {
    box-sizing: border-box;

    .canvas-box{
        position: relative;
        background-color: #E2DFAA;
        width: 100%;

        .offCanvas, .canvas{
            left:0;
            position: absolute;
        }

    }

    .toolbar {
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        width: 100%;
        box-shadow: 0 0 10px 3px #e2e2e2;
        z-index: 9;
        background-color: #fff;

        .toolbar-item{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            text-align: center;

            img{
                height: 22px;
                width: 22px;
                display: block;
                margin: 8px auto 5px;
            }

            span{
                color: #2e344a;
                font-size: 12px
            }
        }
    }

    .footer {
        background-color: #E3DA7F;
        display: flex;
        flex-direction: column;

        .user-list{
            display: flex;
            justify-content: space-between;
            padding: 5px;
            height: 80px;

            .user-item{
                position: relative;
                width: 60px;
                height: 60px;
                padding: 2px;
                margin: 2px;
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }

                .nick-name {
                    margin-top: 4px;
                    padding: 4px;
                    background-color: #D4C356;
                    border-radius: 4px;
                    font-size: 12px;
                    width: 40px;
                    text-align: center;
                }

                .draw-tip {
                    position: absolute;
                    padding: 2px;
                    top: -4px;
                    font-size: 12px;
                    background-color: #fff;
                    border-radius: 4px;
                    transform: scale(.8);
                }

                .level{
                    position: absolute;
                    padding: 2px;
                    text-align: center;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background-color: #fff;
                    right: 2px;
                    bottom: 20px;
                    line-height: 16px;
                    font-size: 12px;
                    transform: scale(.8);
                }
            }
        }

        .chat-content{
            background-color: #DBDBDB;
            height: calc(100% - 80px);
            overflow-y: auto;
            padding: 10px;

            .chat-item{
                display: flex;
                height: 30px;
                font-size: 13px;
                line-height: 30px;

                img{
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                }
            }
        }

        .input-area{
            background-color: #C5C5C5;
        }
    }
}
.color-list{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .color-item{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 10px;
    }
}
.pen-list{
    margin-top: 40px;
    padding: 10px;

    .pen-item{
        width: 100%;
        margin: 15px 0;
        border-radius: 5px;
    }
}
.rubber-area{
    margin-top: 40px;
    padding: 20px 10px 10px 10px;

}
</style>